<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>选项卡</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.7/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .list {
            display: flex;
        }
        .list li {
            width: 100px;
            text-align: center;
            line-height: 40px;
        }

        .list li.layui-this {
            border-bottom: 2px solid #f00;
        }

        .content li {
            display: none;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <!-- 
        选项卡
            .layui-tab 定义选项卡容器  .layui-tab-brief/card 简约风格/卡片风格
            lay-allowClose="true" 设置选项卡是否可被删除
                ul.layui-tab-title 定义选项卡标题
                    li 标题子项
                    layui-this 指向默认选中
                ul.layui-tab-content 定义选项卡内容
                    li.layui-tab-item 内容子项
                    layui-show 内容子项默认出现
         -->
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li>选项一</li>
                <li class="layui-this">选项二</li>
                <li>选项三</li>
                <li>选项四</li>
            </ul>
            <ul class="layui-tab-content">
                <li class="layui-tab-item">选项一内容</li>
                <li class="layui-tab-item layui-show">选项二内容</li>
                <li class="layui-tab-item">选项三内容</li>
                <li class="layui-tab-item">选项四内容</li>
            </ul>

        </div>

        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li>选项一</li>
                <li class="layui-this">选项二</li>
                <li>选项三</li>
                <li>选项四</li>
            </ul>
            <ul class="layui-tab-content">
                <li class="layui-tab-item">选项一内容</li>
                <li class="layui-tab-item layui-show">选项二内容</li>
                <li class="layui-tab-item">选项三内容</li>
                <li class="layui-tab-item">选项四内容</li>
            </ul>

        </div>

        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li>选项一</li>
                <li class="layui-this">选项二</li>
                <li>选项三</li>
                <li>选项四</li>
            </ul>
            <ul class="layui-tab-content">
                <li class="layui-tab-item">选项一内容</li>
                <li class="layui-tab-item layui-show">选项二内容</li>
                <li class="layui-tab-item">选项三内容</li>
                <li class="layui-tab-item">选项四内容</li>
            </ul>

        </div>

        <div class="layui-tab" style="width: 200px">
            <ul class="layui-tab-title">
                <li>选项一</li>
                <li class="layui-this">选项二</li>
                <li>选项三</li>
                <li>选项四</li>
            </ul>
        </div>

        <div class="layui-tab" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li>选项一</li>
                <li class="layui-this">选项二</li>
                <li>选项三</li>
                <li>选项四</li>
                <li>选项五</li>
                <li>选项六</li>
                <li>选项七</li>
            </ul>
        </div>

        <h2>可以手动赋值选项卡</h2>
        <!-- lay-filter 可以理解为 layui定义的选择元素的属性 -->
        <div class="layui-tab" lay-allowClose="true" lay-filter="tabSelect">
            <ul class="layui-tab-title">
                <li lay-id="1">选项一</li>
                <li lay-id="2" class="layui-this">选项二</li>
                <li lay-id="3">选项三</li>
                <li lay-id="4">选项四</li>
                <li lay-id="5">选项五</li>
                <li lay-id="6">选项六</li>
                <li lay-id="7">选项七</li>
            </ul>
            <ul class="layui-tab-content">
                <!-- 数量关系 一一对应 -->
            </ul>
        </div>

        <h2>添加选项卡</h2>
        <button class="layui-btn">添加选项卡</button>

        <div class="self">
            <ul class="list">
                <li class="layui-this">选项一</li>
                <li>选项二</li>
                <li>选项三</li>
            </ul>
            <ul class="content">
                <li>选项一内容</li>
                <li>选项二内容</li>
                <li>选项三内容</li>
            </ul>

        </div>

        <h2>动态添加的内容默认没有切换功能</h2>
        <div class="box">

        </div>
    </div>
    
    <!-- 选项卡也依赖于 element 模块 -->
    <script src="../lib/layui-v2.5.7/layui/layui.all.js"></script>
    <script type="text/javascript">
        console.log(layui.element);
        // 接受上方执行的lay-filter的值， lay-id
        var element = layui.element;
        element.tabChange("tabSelect", "3");

        // layui默认集成 jQuery  layui.$
        var $ = layui.$;

        $(".layui-btn").click(function (){
            element.tabAdd("tabSelect", {
                title: "选项十",
                content: "选项十内容",
                id: "10"
            })
        })

        element.tab({
            headerElem: ".list>li",
            bodyElem: ".content>li"
        })

        // 总结
        // elemtnt.tabAdd(lay-filter, { title: 标题 content: 内容 id: lay-id })
        // element.tabChange(lay-filter, lay-id) 手动切换
        // element.tabDelete(lay-filter, lay-id) 手动切换
        
        // element.tab({ headerElem: "标题元素>标题子元素", bodyElem: "内容元素>子元素"})
        // element.render("动态渲染类型", lay-filter)

    </script>
</body>
</html>